<template>
<div class="container">
    <!-- style 支持绑定 JavaScript 对象值，也就是从变量里面拿值 -->
    <div class="bbb" :style="{
        height: currentHeight + 'px',
        width: currentWidth +'px',
        'font-size':currentSize + 'px'
    }">
        <span>金箍棒</span>
    </div>
    <div>
        <button @click="currentHeight += 10">长</button>
        <button @click="currentHeight -= 10">短</button>
    </div>
    <div>
        <button @click="currentWidth += 10">粗</button>
        <button @click="currentWidth -= 10">细</button>
    </div>
</div>
</template>

<script setup>
import {ref} from 'vue'

const currentHeight = ref(100)
const currentWidth = ref(100)
const currentSize = ref(20)
</script>

<style scoped>
.container{
    background-color: rgb(177, 177, 177);
    border-radius: 15px;
    padding:10px;
    margin:10px;
}
.bbb {
    background: linear-gradient(to right, red,yellow);
    border-radius: 10px;
}
</style>